<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-descriptions title="车辆管理" />
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label="车牌号">
                        <el-input v-model="formInline.license" placeholder="请输入车牌号查询" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="负责教练">
                        <el-select v-model="formInline.coach" placeholder="不限教练" clearable>
                            <el-option :label="item.name" :value="item.name" v-for="item in coachlist"
                                :key="item.objectId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="success" @click="handleClick(1, undefined)">添加车辆</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }">
                <el-table-column type="selection" width="55" />
                <el-table-column fixed prop="license" label="车牌号" width="150" />
                <el-table-column prop="school" label="校区" width="120" />
                <el-table-column prop="type" label="类型" width="120">
                    <template #default="scope">
                        <el-tag :type="scope.row.type == '教练车' ? 'success' : 'danger'" effect="dark">{{
                            scope.row.type }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="subject" label="科目" width="120">
                    <template #default="scope">
                        <el-tag :type="scope.row.subject == '科目二' ? 'success' : 'danger'">{{ scope.row.subject
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="km" label="行驶公里Km" width="120" />
                <el-table-column prop="coach" label="负责教练" width="120" />
                <el-table-column prop="isopen" label="开启" width="120">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isopen"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ebeef5"
                            @change="handleOpen(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column prop="register" label="登记时间" width="200" />
                <el-table-column prop="purchase" label="购买时间" width="200" />
                <el-table-column prop="annual" label="年审到期时间" width="200" />
                <el-table-column prop="business" label="商业险到期时间" width="200" />
                <el-table-column prop="mandatory" label="交强险到期时间" width="200" />
                <el-table-column prop="steel" label="钢瓶到期时间" width="200" />
                <el-table-column prop="convey" label="道路运输到期时间" width="200" />
                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <div class="btn-cont">
                            <el-button type="primary" @click="handleClick(2, scope.row)" plain size="small">编辑</el-button>
                            <el-dropdown>
                                <el-button size="small" plain>
                                    <el-icon class="el-icon--right">
                                        <MoreFilled />
                                    </el-icon>
                                    更多
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>加油</el-dropdown-item>
                                        <el-dropdown-item @click="handleMaintain(scope.row)">维护</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无车辆" />
                </template>
            </el-table>
        </el-form>

        <el-dialog v-model="dialogFormVisible" :title="num == 1 ? '添加车辆' : `编辑车辆:  ${license}`" draggable>
            <CarForm :num="num" :carData="carData" v-if="dialogFormVisible" />
        </el-dialog>
        <el-dialog v-model="dialogFormVisible1" title="维护车辆" draggable>
            <CarMain :CarMaindata="CarMaindata" v-model="dialogFormVisible1" v-if="dialogFormVisible1" />
        </el-dialog>

        <div class="pagination" v-if="tableData.length">
            <el-pagination :page-sizes="[8, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="8" />
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { CarTypes } from '../../types/car'
import CarForm from './components/car-form.vue'
import { CarGet, CarUpdate } from '../../api/car';
import { coachGet } from '../../api/coachmange';
import { cloneDeep } from 'lodash-es'
import { ElMessage } from 'element-plus'
import CarMain from './components/car-main.vue'
// import { useRouter } from 'vue-router';
// 引入路由
// const router=useRouter()

// 查询数据包
const formInline = reactive({
    license: '',
    coach: '',
})
// 数据包
const tableData = ref<CarTypes[]>([])
const total = ref<number>(0)
let res = await CarGet()
total.value = res.data.count
tableData.value = res.data.results
// 查询
const onSubmit = async () => {
    // console.log(formInline);
    let obj = cloneDeep(formInline)
    let res = await CarGet(1, 8, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

// 控制弹框
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
// 控制显示标题
const num = ref<number>(1)
// 传输编辑内容
let carData = reactive({}) as CarTypes | undefined
// 车牌号
let license = ref<string>('')
//编辑按钮
const handleClick = (n: number, val?: CarTypes) => {
    // console.log(val)
    num.value = n
    if (n == 2) {
        license.value = val!.license
    }
    carData = val
    dialogFormVisible.value = true
}



// 多选按钮
const handleSelectionChange = (val: any) => {
    console.log(val);
}


// 获取教练
const coachlist = ref<{ name: string, objectId: string }[]>([])
let coach = await coachGet()
coachlist.value = coach.data.results

// 分页
const Pagesize = ref<number>(8)
// 一页显示多少条
const handleSizeChange = async (val: number) => {
    let obj = cloneDeep(formInline)
    // console.log(val);
    let res = await CarGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    let obj = cloneDeep(formInline)
    let res = await CarGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    // console.log(Pagesize.value);
}


// 是否启用车辆
const handleOpen = (page: CarTypes) => {
    delete page.createdAt
    delete page.updatedAt
    CarUpdate(page.objectId as string, page).then(() => {
        if (page.isopen) {
            ElMessage.success('车辆已启用')
        } else {
            ElMessage.error('车辆已停用')
        }
    })
}

// 维护车辆数据
let CarMaindata = reactive({}) as CarTypes
// 维护车辆
const handleMaintain = (page: CarTypes) => {
    dialogFormVisible1.value = true
    CarMaindata = page
}

</script>

<style lang="scss">
.el-descriptions__title {
    color: #666;
    padding-left: 15px;
    border-left: 4px solid #00aeff;

}

.pagination {
    margin-top: 15px;
}

.btn-cont {
    display: flex;
    justify-content: space-around;
    align-items: center;

}
</style>